<template>
	<el-table :data="tableData" style="width: 99%" border>
		<el-table-column label="序号" prop="name" width="150">
			<template #default="scope">
				<span> {{ scope.$index + 1 }} </span>
			</template>
		</el-table-column>
		<el-table-column label="用户名称" prop="username" width="200">
			<template #default="scope">
				<span>{{ scope.row.username }}</span>
			</template>
		</el-table-column>
		<el-table-column label="用户满意度" prop="satisfaction">
			<template #default="scope">
				<span>{{
					scope.row.satisfaction ? scope.row.satisfaction : "无"
				}}</span>
			</template>
		</el-table-column>
		<el-table-column label="用户意见反馈" prop="feedback">
			<template #default="scope">
				<span>{{ scope.row.feedback ? scope.row.feedback : "无" }}</span>
			</template>
		</el-table-column>
	</el-table>
	<el-pagination
		layout="total, prev, pager, next, jumper"
		:total="total"
		@current-change="handleChange"
	/>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { userLook } from "../../api/user";

let tableData = ref([]);
let total = ref<number>(0);

userLook(1).then((res) => {
	tableData.value = res.data.results;
	total.value = res.data.count;
});

//分页按钮
const handleChange = (num: number) => {
	userLook(num).then((res) => {
		tableData.value = res.data.results;
		total.value = res.data.count;
	});
};
</script>

<style scoped>
.el-select {
	margin-right: 10px;
	width: 212px;
}
.search {
	margin-bottom: 10px;
}
:deep(.cell) {
	text-align: center;
}
.label {
	border-radius: 4px;
	background-color: #ecf7fd;
	color: #268be9;
	margin: 0;
	padding: 5px 10px;
	margin-bottom: 5px;
}
</style>
